<template>
  <div class="containAll">
  <loginHeader></loginHeader>
  <!-- 中间背景 -->
  <div class="loginMain positionRelative">
    <div class="mainContent">
        <el-row class="contentTitle">忘记密码</el-row>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-row>
                    <el-col :span="11" :offset="6" class="marginTop10">
                        <el-form-item label="" prop="username">
                            <el-input
                                placeholder="请输入用户名"
                                v-model="form.username"
                                clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
            </el-row>
            <el-row>
                <el-col :span="11" :offset="6" >
                    <el-form-item label="" prop="phone">
                        <el-input
                            placeholder="请输入手机"
                            v-model="form.phone"
                            clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11" :offset="6">
                    <el-form-item label="" prop="code">
                        <el-row :gutter="20">
                            <el-col :span="12" >
                                <el-input
                                    placeholder="请输入内容"
                                    v-model="form.code"
                                    clearable>
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-button class="width100"  @click="sendMsg" :disabled="isDisabled">{{buttonName}}</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11" :offset="6" >
                    <el-form-item label="" prop="password">
                            <el-input
                                placeholder="请输入密码"
                                v-model="form.password"
                                type="password"
                                clearable>
                            </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11" :offset="6" >
                    <el-form-item label="" prop="comfirmPass">
                        <el-input
                            placeholder="请再次输入密码"
                            type="password"
                            v-model="form.comfirmPass"
                            clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11" :offset="6">
                    <el-form-item label="">
                            <el-button class="width100" type="success" @click="submitForm('form')">同意并注册</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="">
                    <el-col :span="9" :offset="7">
                        其他方式登陆:&nbsp;&nbsp; <span class="iconfont iconweixin fontSize18"></span>
                        &nbsp;&nbsp;<span class="iconfont iconshouji fontSize18"></span>
                    </el-col>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
  </div>
  <footers></footers>
  </div>
</template>
<script type="text/javascript" layout="full" meta="{auth:true}">
import Footers from '../../../layout/default/components/footer/footer'
import LoginHeader from '../../../layout/default/components/header/loginHead'
import {mapActions} from 'vuex'
import {SET_USER_INFO} from 'src/store/actions/type'
import {homePage} from 'src/common/setting'
export default {
  name: 'ForgetPass',
  data () {
    
    //检查姓名
    var checkUsername = (rule, value, callback) => {
    if (value == '') {
        callback(new Error('请输入用户名'));
    }
    callback();
    };
      //密码
        var checkPassword = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            if (this.form.comfirmPass !== '') {
            this.$refs.form.validateField('comfirmPass');
            }
            callback();
        }
        };
      //确认密码
        var checkComfirmPass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
        };
      //手机号码
      var checkPhone = (rule, value, callback) => {
        let phoneReg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (value === '') {
            callback(new Error('请输入手机号码'));
        }else  if (phoneReg.test(value)) {
          callback()
        } else {
          callback(new Error('电话号码格式不正确'))
        }
    };

    return {
        buttonName: "发送短信",
        isDisabled: false,
        time: 60,
      form: {
        username: '',
        password: '',
        comfirmPass:'',
        phone:'',
        validCode:'',
      },
      rules: {
        username: [{trigger: 'blur',validator: checkUsername}],
        password: [{trigger: 'blur',validator: checkPassword}],
        comfirmPass: [{trigger: 'blur',validator: checkComfirmPass}],
        phone: [{trigger: 'blur',validator: checkPhone}],
        validCode:[{required: true, message: '验证码不能为空', trigger: 'blur'}]
      },
    //   submitLoad: false
    }
  },
  components:{
      LoginHeader,
      Footers
  },
  methods:{
    submitForm(form) {
        this.$refs[form].validate((valid) => {
            if (valid) {
              var dataObj = {
                name:this.form.username,
                password:this.form.password,
                confirmPassword:this.form.comfirmPass,
                phone:JSON.stringify( this.form.phone ),
                validCode:JSON.stringify(this.form.validCode),
              }
              this.subObj(dataObj)
          } else {
            return false;
          }
        });
      },
      async subObj(dataObj){
        const { $confirm, $api, $message, $router, setUserInfo } = this;
        const data = await $api.user.apiChangePassword(dataObj);
        console.log(data);
        if(data.code==0){
            this.$message.success('密码修改成功');
            this.$store.push({
                'name':'UserLogin',
            })
        }else{
            this.$message.warning(data.msg);
        }
      },
    //获取验证码
    sendMsg() {
        console.log( this.form.phone );
        if(this.form.phone.length==0){
            this.$message.error('手机不能为空，不能发送验证码');
            return false;
        }
        this.asyncSend()
    },
    async asyncSend(){
        const { $confirm, $api, $message, $router, setUserInfo } = this;
        let dataObj = {
            'phone':this.form.phone
        }
        const data = await $api.user.apiSendFindpwdSMSCode(dataObj);
        console.log(data);
        if(data.code==0){
            let me = this;
            me.isDisabled = true;
            let interval = window.setInterval(function() {
                me.buttonName = '（' + me.time + '秒）后重新发送';
                --me.time;
                if(me.time < 0) {
                    me.buttonName = "重新发送";
                    me.time = 10;
                    me.isDisabled = false;
                    window.clearInterval(interval);
                }
            }, 1000);
        }
    }
  }
}
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
.fontSize18{
  font-size: 18px;
  cursor: pointer;
}
.marginTop33{
    margin-top: 33px;
}
.width100{
    width: 100%;
}
.marginTop26{
    margin-top: 26px;
}
.positionRelative{
    position: relative;
}
.mainContent{
    width:1037px;
    height:536px;
    opacity:0.95;
    position: absolute;
    background: #ffffff;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
}
.loginMain{
  width: 100%;
  height: 745px;
  background: url('../../../assets/images/forgetPassBg.png');
  border-bottom: 1px solid #0000;
}
.contentTitle{
    font-size:24px;
    font-family:SourceHanSansCN-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:17px;
    border-bottom: 1px solid #cccccc;
    line-height: 60px;
}
</style>
